<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <link
      rel="stylesheet"
      type="text/css"
      href="{{pluResPath}}/html/help/common.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{pluResPath}}/html/help/help.css"
    />
  </head>

  <body class="elem-default default-mode">
    <div class="container" id="container">
      <div class="info_box">
        <div class="head-box type">
          <div class="title">xiuxian@1.4.0</div>
        </div>
      </div>

      {{each helpData val}}
      <div class="cont-box">
        <div class="help-group">{{val.group}}</div>
        <div class="help-table">
          <div class="tr">
            {{each val.list item}}
            <div class="td">
              <span class="help-icon {{item.icon}}"></span>
              <strong class="help-title">{{item.title}}</strong>
              <span class="help-desc">{{item.desc}}</span>
            </div>
            {{/each}}
          </div>
        </div>
      </div>
      {{/each}}
      <div class="copyright">
        Xiuxian-Plugin<span class="version">@1.4.0</span>
      </div>
    </div>
  </body>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-user-select: none;
      user-select: none;
    }

    body {
      font-size: 18px;
      color: #47ada8;
      font-family: PingFangSC-Medium, PingFang SC, sans-serif;
      transform: scale(1.4);
      transform-origin: 0 0;
      width: 600px;
    }

    body {
      transform: scale(1);
      width: 100%;
      background: url('{{pluResPath}}/img/help/xiuxian.jpg') top left no-repeat;
      background-size: 100% 100%;
    }

    .container {
      width: 100%;
      padding: 40px !important;
    }

    .help-icon {
      width: 40px;
      height: 40px;
      display: block;
      position: absolute;
      background: url('{{pluResPath}}/img/help/icon.png') 0 0 no-repeat;
      background-size: 500px auto;
      border-radius: 5px;
      left: 6px;
      top: 12px;
      transform: scale(0.85);
    }
  </style>
</html>
